  <!DOCTYPE html>

<!--
Copyright 2017 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html lang="en">
<head>

<script>
//  philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build
window.ga = window.ga || function() {
  (ga.q = ga.q || []).push(arguments);
};
ga('create', 'UA-33848682-1', 'auto');
ga('set', 'transport', 'beacon');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<meta charset="utf-8">
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="/images/icons/icon192.png">
<meta id="theme-color" name="theme-color" content="#fff">

<link rel="icon" href="/images/icons/icon192.png">

<base target="_blank">


<title>img with srcset and sizes</title>

<link rel="stylesheet" href="../css/main.css">

<style>
  img {
    width: 50vw;
  }
</style>

</head>

<body>

  <div id="container">

    <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with srcset and sizes</h1>

    <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="50vw" alt="Lias and Little Puss: two ten week old grey tabby kittens" />

    <p>Try changing the viewport size.</p>

    <p>The sizes attribute enables the browser to choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the screen resolution and image display width (set to be 50% of viewport width).</p>

    <p>
      Image used: <span id="imgSrc"></span><br>
      Image natural width: <span id="imgNaturalWidth"></span>px<br>
      Image display width: <span id="imgWidth"></span>px<br>
      Device pixel ratio: <span id="devicePixelRatio"></span><br>
      Minimum acceptable image width: <span id="minimumWidth"></span>px<br>
      Viewport width: <span id="viewportWidth"></span>px<br>
      Available screen width: <span id="availableWidth"></span>px<br>
    </p>

    <p class="borderBelow"><a href="../srcsetwvalues" title="img element with srcset using w values, but no sizes attribute">Without the sizes attribute</a> the browser can only take into account <strong>viewport</strong> width, not image <strong>display</strong> width.</p>

    <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>

    <a href="https://github.com/samdutton/simpl/blob/gh-pages/sizeswvalues" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

  </div>

  <script src="js/main.js"></script>

  </body>
  </html>
